<template>
  <!-- 商品区 -->
  <div class="commodity">
    <div class="bgtitlebox">
      <!-- <img src="@/assets/images/one/bgtitle.png"> -->
    </div>
    <div class="mgtfu">
      <div class="commodity-bg"
           v-for="(item,index) in imglist"
           :key="index">

        <img :src="item.titleImg"
             class="titleimg">
        <!-- 商品 -->
        <div class="commodity-img">
          <div v-for="(item2,index2) in item.imgUrl"
               :key="index2"
               style="position: relative;">
            <div class="iphoneleft"
                 v-if="item2.name == '苹果1'">和彩云</div>
            <img :src="item2.url"
                 style="margin-right:9px">
            <div class="aftimg"
                 v-if="item2.name == '安防'"
                 @click="watchesClick(item2,item,index2)"></div>
            <div class="xbutimg"
                 @click="watchesClick(item2,item,index2)"></div>
            <div class="qbutimg"
                 @click="grabClick(item2,item,index2)">抢</div>
          </div>
        </div>
        <!-- 按钮 -->
        <div class="botimg"
             @click="moreClick(item)">
          <img src="@/assets/images/one/gdbut.png">
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, getCurrentInstance, onMounted } from 'vue'
import loginModel from '@m/onekey-login/index.vue'
import { Toast, Dialog } from 'vant'

// 格式化日期的
import userApi from '@/api/mobile_user/index'
import { Storage } from '@/utils/Storage'
import { useRoute, useRouter } from 'vue-router'
import { recordCilck } from '@/utils/record'

import { MOBILE_TOKEN, MOBILE_USER } from '@/store/mutation-types'
import imgTitle1 from '@/assets/images/one/yi.png'
import imgTitle2 from '@/assets/images/one/er.png'
import imgTitle3 from '@/assets/images/one/san.png'
import imgTitle4 from '@/assets/images/one/si.png'
import imgTitle5 from '@/assets/images/one/wu.png'
import imgyi1 from '@/assets/images/one/yib1.png'
import imgyi2 from '@/assets/images/one/yib2.png'
import imger1 from '@/assets/images/one/erb1.png'
import imger2 from '@/assets/images/one/erb2.png'
import imgsan1 from '@/assets/images/one/san1.png'
import imgsan2 from '@/assets/images/one/san2.png'
import imgsi1 from '@/assets/images/one/si1.png'
import imgsi2 from '@/assets/images/one/si2.png'
import imgwu1 from '@/assets/images/one/wu1.png'
import imgwu2 from '@/assets/images/one/wu2.png'

export default defineComponent({
  name: 'Login',
  components: { loginModel },
  setup() {
    const { proxy }: any = getCurrentInstance()
    const route = useRoute()
    const router = useRouter()
    const state: any = reactive({
      num: 10,
      imglist: [
        {
          imgUrl: [
            { url: imgyi1, name: '待定字段' },
            { url: imgyi2, name: '待定字段' }
          ],
          titleImg: imgTitle1,
          name: '儿童手表'
        },
        {
          imgUrl: [
            { url: imger1, name: '待定字段' },
            { url: imger2, name: '待定字段' }
          ],
          titleImg: imgTitle2,
          name: '运动手表'
        },
        {
          imgUrl: [
            { url: imgsan1, name: '苹果1' },
            { url: imgsan2, name: '待定字段' }
          ],
          titleImg: imgTitle3,
          name: '拍照手机'
        },
        {
          imgUrl: [
            { url: imgsi1, name: '待定字段' },
            { url: imgsi2, name: '待定字段' }
          ],
          titleImg: imgTitle4,
          name: '开黑手机'
        },
        {
          imgUrl: [
            { url: imgwu1, name: '安防' },
            { url: imgwu2, name: '安防' }
          ],
          titleImg: imgTitle5,
          name: '安防设备'
        }
      ]
    })
    function moreClick(data) {
      proxy.$emit('moreClick', data)
    }
    function watchesClick(data, name, index) {
      console.log(data, '首页点击了商品详情', '一级-' + name.name + (index + 1) + '商品详情')

      if (name.name != '安防设备') {
        router.push({
          name: 'immediatelyTransaction'
        })
      }
      recordCilck('一级-' + name.name + (index + 1) + '商品详情', '-')
      // Webapph5.pushTrack({ eventmsg: '一级-' + name.name + (index + 1) + '商品详情', eventid: '1' })
    }
    function grabClick(data, name, index) {
      console.log(data, '首页点击了qia抢抢', '一级-' + name.name + (index + 1) + '去预约')
      recordCilck('一级-' + name.name + (index + 1) + '抢', '-')
      Storage.set('merchandiseNews', data, 30 * 60)
      // Webapph5.pushTrack({ eventmsg: '一级-' + name.name + (index + 1) + '去预约', eventid: '1' })

      if (name.name == '安防设备') {
        router.push({
          name: 'appointment'
        })
      } else {
        // router.push({
        //   name: 'immediatelyTransaction'
        // })
        let numType: any = localStorage.getItem('h5type')
        if (numType == 1) {
          window.location.href = 'https://gd.10086.cn/gmccapp/webpage/serviceHall/index.html'
        } else {
          // 您暂时无法参加本优惠，敬请留意其他优惠活动
          Dialog.alert({
            message: '您暂时无法参加本优惠，敬请留意其他优惠活动'
          }).then(() => {
            // on close
          })
        }
      }
    }

    // 组件-完
    onMounted(() => {})

    return {
      ...toRefs(state),
      moreClick,
      watchesClick,
      grabClick
    }
  }
})
</script>

<style lang="scss" scoped>
.commodity {
  .bgtitlebox {
    // position: absolute;
    background-image: url(../../assets/images/one/bgtitle.png);
    width: 370px;
    height: 280px;
    margin: 0px auto;
    background-size: 100% 100%;
    background-position: center center;
  }
  .mgtfu {
    margin-top: -225px;
  }
  .commodity-bg {
    width: 350px;
    height: 250px;
    margin: 30px auto;
    background-image: url(../../assets/images/one/xbg.png);
    background-size: 100% 100%;
    background-position: center center;
    z-index: 100 !important;

    .titleimg {
      width: 122px;
      margin-top: -20px;
      margin-left: 110px;
    }

    .commodity-img {
      display: flex;
      flex-wrap: wrap;
      margin-left: 9px;
      z-index: 100;
      // @/assets/images/one/bgtitle.png
      .iphoneleft {
        width: 55px;
        background: #db2103;
        position: absolute;
        top: 5px;
        right: 14px;
        font-size: 12px;
        transform: scale(0.8, 0.8);
        color: #fae2e4;
      }
      img {
        width: 160px;
        margin: 5px 0;
      }
      .aftimg {
        position: absolute;
        margin: -22px 0 3px 3px;
        background: #cc1f26;
        width: 40px;
        height: 15px;
        z-index: 200;
      }
      .xbutimg {
        // position: absolute;
        margin: -20px 0 3px 3px;
        background: chartreuse;
        opacity: 0;
        width: 40px;
        height: 15px;
        z-index: 200;
      }
      .qbutimg {
        position: absolute;
        margin: -60px 0px 3px 105px;
        opacity: 0;
        width: 50px;
        height: 50px;
        z-index: 200;
      }
    }
    .botimg {
      text-align: center;
      margin-top: 5px;
      img {
        width: 107px;
      }
    }
  }
}
</style>
